﻿@{
    ViewBag.Title = "修改销售订单";
    Layout = null;
}

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>销售订单</title>
    <!-- 引用Layui的CSS -->
    <link href="//unpkg.com/layui@2.10.1/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 整体表单容器样式 */
        .order-form-container {
            padding: 10px;
        }
        /* 表单行样式 */
        .layui-inline {
            display: flex;
            flex-direction: row;
        }
        /* 操作按钮容器样式 */
        .operation-buttons {
            text-align: right;
            margin-bottom: 10px;
        }
        /* 表格样式 */
        .layui-table {
            width: 100%;
        }
    </style>
</head>

<body>
    <div class="order-form-container">
        <!-- 操作按钮 -->
        <div class="operation-buttons">
            @* <button class="layui-btn" id="saveButton">保存</button> *@
            <button type="button" class="layui-btn layui-bg-orange" id="printInfo">打印</button>
          @*   <button class="layui-btn layui-btn-normal" id="approveButton">审核</button>
            <button class="layui-btn layui-btn-disabled" id="reapproveButton">反审核</button> *@
            @* <button class="layui-btn layui-btn-mini" id="collapseButton">收起</button> *@
        </div>
        <!-- 表单信息 -->
        <div class="layui-inline">
            <label class="layui-input-inline">单据编码:</label>
            <input type="text" id="documentCode" class="layui-input-inline" disabled>&nbsp; &nbsp;
            <label class="layui-input-inline">业务类型:</label>
            <div class="layui-input-inline">
                <select id="businessType" disabled>
                    <option value="1">销售订单</option>
                    <!-- 可根据实际业务添加更多选项 -->
                </select>
            </div>&nbsp; &nbsp;
            <label class="layui-input-inline">操作员:</label>
            <input type="text" id="oprator" value="wdx" class="layui-input-inline" disabled>&nbsp; &nbsp;
            <label class="layui-input-inline">客户名称:</label>
            <select id="customerId" disabled>
                <option value="1">李迅</option>
                <option value="2">张丽</option>
                <option value="3">刘慧敏</option>
                <option value="4">张经纬</option>
                <option value="5">蒙牛</option>
                <option value="6">可乐</option>
                <option value="7">加多宝</option>
                <!-- 可根据实际业务添加更多选项 -->
            </select>
            @* <button class="layui-input-inline" id="selectCustomerButton">选择</button>&nbsp; &nbsp; *@
            <label class="layui-input-inline">收货人:</label>
            <input type="text" id="receiver" class="layui-input-inline" disabled>&nbsp; &nbsp;
        </div><br />
        <div class="layui-inline">
            <label class="layui-input-inline">单据日期:</label>
            <input type="date" id="documentDate" value="2025-03-29" class="layui-input-inline" disabled>&nbsp; &nbsp;
            <label class="layui-input-inline">业务状态:</label>
            <div class="layui-input-inline">
                <select id="businessStatus" disabled>
                    <option value="1">正常</option>
                    <!-- 可根据实际业务添加更多选项 -->
                </select>
            </div>&nbsp; &nbsp;
            <label class="layui-input-inline">审核员:</label>
            <input type="text" id="examUser" class="layui-input-inline" disabled>&nbsp; &nbsp;
            <label class="layui-input-inline">合同号:</label>
            <input type="text" id="contract" class="layui-input-inline" disabled>
            <button class="layui-input-inline" id="uploadContractButton">上传</button>&nbsp; &nbsp;
            <label class="layui-input-inline">电话:</label>
            <input type="text" id="phone" class="layui-input-inline" disabled>&nbsp; &nbsp;
        </div><br />
        <div class="layui-inline">
            <label class="layui-input-inline">单据状态:</label>
            <input type="text" id="documentStatus" value="开立" class="layui-input-inline" disabled>&nbsp; &nbsp;
            <label class="layui-input-inline">销售部门:</label>
            <div class="layui-input-inline">
                <select id="saleDempt" disabled>
                    <option value="1">销售部门</option>

                </select>
            </div>&nbsp; &nbsp;
            <label class="layui-input-inline">审核日期:</label>
            <input type="date" id="examDate" class="layui-input-inline" disabled>&nbsp; &nbsp;
            <label class="layui-input-inline">地址:</label>
            <input type="text" id="address" class="layui-input-inline" disabled>&nbsp; &nbsp;
        </div><br />
        <div class="layui-inline">
            <label class="layui-input-inline">单据类型:</label>
            <div class="layui-input-inline">
                <select id="documentType" disabled>
                    <option value="1">业务订单</option>
                    <!-- 可根据实际业务添加更多选项 -->
                </select>
            </div>&nbsp; &nbsp;
            <label class="layui-input-inline">销售人员:</label>
            <div class="layui-input-inline">
                <select id="saleUser" disabled>
                    <option value="赵策">赵策</option>
                    <option value="张敬伟">张敬伟</option>
                    <option value="张文龙">张文龙</option>
                    <option value="王星航">王星航</option>
                    <!-- 可根据实际业务添加更多选项 -->
                </select>
            </div>&nbsp; &nbsp;
            <label class="class=" layui-input-inline"">销售类型:</label>
            <div class="layui-input-inline">
                <select id="salesType" disabled>
                    <option value="1">国内品牌</option>
                    <option value="2">外购成品</option>
                    <option value="3">外购原料</option>
                    <option value="4">自接订单</option>
                    <option value="5">自制销售</option>
                    <option value="6">客供销售</option>
                </select>
            </div>&nbsp; &nbsp;
            <label class="layui-input-inline">交付日期:</label>
            <input type="date" id="deliverDate" class="layui-input-inline" disabled>&nbsp; &nbsp;
            <label class="layui-input-inline">目的国家:</label>
            <input type="text" id="goalCountry" class="layui-input-inline" disabled>&nbsp; &nbsp;
        </div><br />
        <div class="layui-inline">
            <label class="layui-input-inline">供货方式:</label>
            <div class="layui-input-inline">
                <select id="supplyType" disabled>
                    <option value="1">计划生产</option>
                    <!-- 可根据实际业务添加更多选项 -->
                </select>
            </div>&nbsp; &nbsp;
            <label class="layui-input-inline">交期状态:</label>
            <input type="radio" name="deliveryStatus" value="false" class="layui-input-inline" disabled> 预计
            <input type="radio" name="deliveryStatus" value="true" checked class="layui-input-inline" disabled> 确认  &nbsp; &nbsp;
            <label class="form-label" class="layui-input-inline">备注信息:</label>
            <input type="text" id="remark" class="layui-input-inline" disabled>&nbsp; &nbsp;
        </div><br />

        <!-- 表单信息表格操作按钮 -->
        <div class="form-row">
            @* <button class="layui-btn layui-btn-xs" id="importButton">引入</button>
            <button class="layui-btn layui-btn-xs" id="addMaterialButton">新增物料</button> *@
        </div>

        <!-- 表单信息表格 -->
        <table class="layui-table" id="materialTable">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>物料编码</th>
                    <th>物料名称</th>
                    <th>型号规格</th>
                    <th>主计量</th>
                    <th>数量</th>
                    <th>单价</th>
                    <th>金额</th>
                    <th>件数</th>
                    <th>质量要求</th>
                    <th>包装要求</th>
                    <th>备注</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
          @*       <tr>
                    <td>1</td>
                    <td><input type="text" id="materialsCode" value="0400000002" class="layui-input" placeholder="请添加物料" readonly><button class="layui-btn layui-btn-xs" class="selectMaterialButton">选择</button></td>
                    <td><input type="text" id="materialsName" value="物料1" class="layui-input" readonly /></td>
                    <td><select class="layui-select" id="color"><option value="白色">白色</option><option value="黑色">黑色</option></td>
                    <td><select class="layui-select" id="calulate"><option value="台">台</option><option value="箱">箱</option></select></td>
                    <td><input type="text" id="calulateNumber" class="layui-input" placeholder="请输入数量"></td>
                    <td><input type="text" class="layui-input" value="0.00" id="price" placeholder="请输入单价"></td>
                    <td><input type="text" class="layui-input" value="0.00" id="totalPrice" placeholder="请输入金额"></td>
                    <td><input type="text" id="calulateNumber" class="layui-input" placeholder="件数"><select class="layui-select" id="calulate"><option value="台">台</option><option value="箱">箱</option></select></td>
                    <td><input type="text" class="layui-input" placeholder="请输入质量要求" id="qualityRequir"></td>
                    <td><input type="text" class="layui-input" placeholder="请输入包装要求" id="packRequir"></td>
                    <td><input type="text" class="layui-input" placeholder="请输入备注" id="remark"></td>
                    <td><button class="layui-btn layui-btn-xs layui-btn-danger" class="deleteMaterialButton">删除</button></td>
                </tr> *@
            </tbody>
        </table>
    </div>

    <script src="//unpkg.com/layui@2.10.1/dist/layui.js"></script>
    <script>
        layui.use(['layer', 'form', 'jquery'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var $ = layui.jquery;
            var documentCode = "";
            // 从URL获取单据编码
            function getQueryParam(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return decodeURIComponent(r[2]);
                return null;
            }
            // 给表格行添加点击事件
            // $(document).ready(function () {
            //     $('#materialTable tbody tr').click(function () {
            //         $('#materialTable tbody tr').removeClass('selected');
            //         $(this).addClass('selected');
            //     });
            // });

            //跳转打印功能
            $('#printInfo').click(function () {
                // 获取单据编码并加载数据
                console.log("22222查看单据编码2222：", documentCode);
                window.location.href = '@Url.Action("HiPrint", "SaleOrder")?id=' + encodeURIComponent(documentCode);
            });

            // 初始化一个空行
            function initEmptyRow() {
                return {
                    materialsCode: '',
                    materialsName: '',
                    modelSpecification: '',
                    color: '',
                    calulate: '箱',
                    calulateNumber: 0,
                    outBoundNumber: 0,
                    volume: 0,
                    batch: '',
                    price: 0,
                    totalPrice: 0,
                    qualityRequir: '',
                    packRequir: '',
                    remark: '',
                    materialsClass: 1
                };
            }

            // 添加物料行
            function addMaterialRow(material) {
                material = material || initEmptyRow();
                var rowCount = $('#materialTable tbody tr').length + 1;

                var rowHtml = `
                    <tr data-index="${rowCount - 1}">
                        <td>${rowCount}</td>
                        <td>
                            <input type="text" class="layui-input materialsCode" value="${material.materialsCode || ''}" placeholder="物料编码" readonly>
                            <button type="button" class="layui-btn layui-btn-xs selectMaterialButton">选择</button>
                        </td>
                        <td><input type="text" class="layui-input materialsName" value="${material.materialsName || ''}" placeholder="物料名称" readonly></td>
                        <td><input type="text" class="layui-input modelSpecification" value="${material.modelSpecification || ''}" placeholder="型号规格"></td>
                        <td>
                            <select class="layui-select calulate">
                                <option value="台" ${material.calulate === '台' ? 'selected' : ''}>台</option>
                                <option value="箱" ${material.calulate === '箱' ? 'selected' : ''}>箱</option>
                                <option value="张" ${material.calulate === '张' ? 'selected' : ''}>张</option>
                            </select>
                        </td>
                        <td><input type="number" class="layui-input calulateNumber" value="${material.calulateNumber || 0}" placeholder="数量"></td>
                        <td><input type="number" class="layui-input price" value="${material.price || 0}" placeholder="单价"></td>
                        <td><input type="number" class="layui-input totalPrice" value="${material.totalPrice || 0}" placeholder="金额" readonly></td>
                        <td><input type="number" class="layui-input outBoundNumber" value="${material.outBoundNumber || 0}" placeholder="件数"></td>
                        <td><input type="text" class="layui-input qualityRequir" value="${material.qualityRequir || ''}" placeholder="质量要求"></td>
                        <td><input type="text" class="layui-input packRequir" value="${material.packRequir || ''}" placeholder="包装要求"></td>
                        <td><input type="text" class="layui-input remark" value="${material.remark || ''}" placeholder="备注"></td>
                        <td><button type="button" class="layui-btn layui-btn-xs layui-btn-danger deleteMaterialButton">删除</button></td>
                    </tr>`;

                $('#materialTable tbody').append(rowHtml);
                form.render();
            }

            // 清空物料表格
            function clearMaterialTable() {
                $('#materialTable tbody').empty();
            }

            // 加载订单详情
            function loadOrderDetail(documentCode) {
                if (!documentCode) return;

                var loadIndex = layer.load(2);
                $.ajax({
                    url: 'http://localhost:5234/api/SaleOrder/GetSaleOrderDetail',
                    //url: "@ViewBag.BaseUrl/T7/SaleOrder/GetSaleOrderDetail",
                    type: 'GET',
                    data: { DocumentCode: documentCode },
                    dataType: 'json',
                    success: function (res) {
                        layer.close(loadIndex);
                        if (res.code === 210 && res.data) {
                            fillFormData(res.data);
                        } else {
                            layer.msg(res.msg || '获取订单详情失败', { icon: 2 });
                        }
                    },
                    error: function (xhr, status, error) {
                        layer.close(loadIndex);
                        layer.msg('请求失败: ' + error, { icon: 2 });
                        console.error(xhr.responseText);
                    }
                });
            }

            // 填充表单数据
            function fillFormData(data) {
                // 基本信息
                $('#documentCode').val(data.id);
                $('#businessType').val(data.businessType);
                $('#oprator').val(data.oprator);
                $('#customerId').val(data.customerId);
                $('#receiver').val(data.receiver);
                $('#documentDate').val(formatDate(data.documentDate));
                $('#businessStatus').val(data.businessStatus);
                $('#examUser').val(data.examUser);
                $('#contract').val(data.contract);
                $('#phone').val(data.phone);
                $('#documentStatus').val('开立'); 
                $('#saleDempt').val(data.saleDempt || '1');
                $('#examDate').val(formatDate(data.examDate));
                $('#payDate').val(formatDate(data.payDate));
                $('#address').val(data.address);
                $('#documentType').val(data.documentType);
                $('#saleUser').val(data.saleUser);
                $('#salesType').val(data.saleType);
                $('#deliverDate').val(formatDate(data.deliverDate));
                $('#goalCountry').val(data.goalCountry);
                $('#supplyType').val(data.supplyType || '1');
                $('input[name="deliveryStatus"][value="' + data.deliveryStatus + '"]').prop('checked', true);
                $('#remark').val(data.remark);

                // 渲染表单
                form.render();

                // 填充物料数据
                clearMaterialTable();
                if (data.orderMaterials && data.orderMaterials.length > 0) {
                    data.orderMaterials.forEach(function (material) {
                        addMaterialRow(material);
                    });
                } else {
                    addMaterialRow(); // 添加一个空行
                }
            }

            // 格式化日期为YYYY-MM-DD
            function formatDate(dateString) {
                if (!dateString) return '';
                var date = new Date(dateString);
                return date.getFullYear() + '-' +
                    String(date.getMonth() + 1).padStart(2, '0') + '-' +
                    String(date.getDate()).padStart(2, '0');
            }

            // 页面初始化
            $(function () {
                // 获取单据编码并加载数据
                documentCode = getQueryParam('id');
                console.log("1111查看单据编码1111：",documentCode);
                if (documentCode) {
                    loadOrderDetail(documentCode);
                } else {
                    // 新增模式，初始化一个空行
                    addMaterialRow();
                }

                // 其他事件绑定...
            });

            // 其他函数保持不变...
        });
    </script>
</body>
</html>